 <template>
   <!--dialog begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <el-row>
     <el-button type="primary" @click="contentDisplay">内容展示</el-button>
     <el-button type="primary" @click="formEdit">表单编辑</el-button>
     <el-button type="success" @click="confirmationPrompt">提示</el-button>
   </el-row>
   <!--内容展示 dialog-->
   <el-dialog title="内容展示" :visible.sync="dialogContentDisplay">
      <span style="padding: 20px;">此处放置要展示的内容</span>
   </el-dialog>
   <!--表单编辑 dialog-->
   <el-dialog title="表单编辑" :visible.sync="dialogFormEdit" top="60px">
     <div class="overflowY" style="height: 330px;padding-right: 15px;">
       <el-form :rules="rules" :model="ruleForm" label-width="80px">
         <el-form-item label="标题名称" prop="name">
           <el-input v-model="ruleForm.name"></el-input>
         </el-form-item>
         <el-form-item label="日期 : " prop="dateSelection">
           <div class="searchTime" style="width: 100%">
             <el-date-picker
               size="small"
               v-model="ruleForm.dateSelection"
               type="date"
               placeholder="选择日期">
             </el-date-picker>
           </div>
         </el-form-item>
         <el-form-item label="描述 : ">
           <el-input
             type="textarea"
             :rows="2"
             placeholder="请输入内容"
             v-model="ruleForm.textarea">
           </el-input>
         </el-form-item>
         <el-form-item label="项目状态 : ">
           <el-select v-model="ruleForm.itemState" placeholder="请选择" size="small">
             <el-option
               v-for="item in options2"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="性别 : ">
           <el-radio-group v-model="ruleForm.gender">
             <el-radio :label="0">男</el-radio>
             <el-radio :label="1">女</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="栏目 : ">
           <el-checkbox-group v-model="ruleForm.checkList">
             <el-checkbox label="0">旅游</el-checkbox>
             <el-checkbox label="1">音乐</el-checkbox>
             <el-checkbox label="2">美术</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-form>
     </div>
     <div slot="footer" class="dialog-footer" style="text-align: right;">
       <el-button @click="dialogFormEdit = false">取 消</el-button>
       <el-button type="primary" @click="dialogFormEdit = false">确 定</el-button>
     </div>
   </el-dialog>
   <!--确认提示 dialog-->
   <el-dialog title="提示" :visible.sync="dialogConfirmationPrompt" width="30%">
     <span style="font-size: 14px;color: #333333">我是提示信息</span>
     <span slot="footer" class="dialog-footer">
    <el-button @click="dialogConfirmationPrompt = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmationPrompt = false">确 定</el-button>
  </span>
   </el-dialog>

   <base-card title="说明">
     <code style="margin-top: 15px;">
      <span style="width: 100%;display: inline-block;">1、el-dialog上的top控制距离页面顶端的距离</span>
      <span style="width: 100%;display: inline-block;">2、el-dialog上的width控制弹出层的宽度</span>
      <span style="width: 100%;display: inline-block;">3、:visible.sync接收2个参数 true  false,true为显示，false为隐藏</span>
     </code>
   </base-card>
   <base-card title="HTML">
     <pre><code><p>&nbsp;&nbsp;&nbsp;&lt;el-row&gt;<br>     &lt;el-button type="primary" @click="contentDisplay"&gt;内容展示&lt;/el-button&gt;<br>     &lt;el-button type="primary" @click="formEdit"&gt;表单编辑&lt;/el-button&gt;<br>     &lt;el-button type="success" @click="confirmationPrompt"&gt;提示&lt;/el-button&gt;<br>   &lt;/el-row&gt;<br>   &lt;!--内容展示 dialog--&gt;<br>   &lt;el-dialog title="内容展示" :visible.sync="dialogContentDisplay"&gt;<br>      &lt;span style="padding: 20px;"&gt;此处放置要展示的内容&lt;/span&gt;<br>   &lt;/el-dialog&gt;<br>   &lt;!--表单编辑 dialog--&gt;<br>   &lt;el-dialog title="表单编辑" :visible.sync="dialogFormEdit" top="60px"&gt;<br>     &lt;div class="overflowY" style="height: 330px;padding-right: 15px;"&gt;<br>       &lt;el-form :rules="rules" :model="ruleForm" label-width="80px"&gt;<br>         &lt;el-form-item label="标题名称" prop="name"&gt;<br>           &lt;el-input v-model="ruleForm.name"&gt;&lt;/el-input&gt;<br>         &lt;/el-form-item&gt;<br>         &lt;el-form-item label="日期 : " prop="dateSelection"&gt;<br>           &lt;div class="searchTime" style="width: 100%"&gt;<br>             &lt;el-date-picker<br>               size="small"<br>               v-model="ruleForm.dateSelection"<br>               type="date"<br>               placeholder="选择日期"&gt;<br>             &lt;/el-date-picker&gt;<br>           &lt;/div&gt;<br>         &lt;/el-form-item&gt;<br>         &lt;el-form-item label="描述 : "&gt;<br>           &lt;el-input<br>             type="textarea"<br>             :rows="2"<br>             placeholder="请输入内容"<br>             v-model="ruleForm.textarea"&gt;<br>           &lt;/el-input&gt;<br>         &lt;/el-form-item&gt;<br>         &lt;el-form-item label="项目状态 : "&gt;<br>           &lt;el-select v-model="ruleForm.itemState" placeholder="请选择" size="small"&gt;<br>             &lt;el-option<br>               v-for="item in options2"<br>               :key="item.value"<br>               :label="item.label"<br>               :value="item.value"&gt;<br>             &lt;/el-option&gt;<br>           &lt;/el-select&gt;<br>         &lt;/el-form-item&gt;<br>         &lt;el-form-item label="性别 : "&gt;<br>           &lt;el-radio-group v-model="ruleForm.gender"&gt;<br>             &lt;el-radio :label="0"&gt;男&lt;/el-radio&gt;<br>             &lt;el-radio :label="1"&gt;女&lt;/el-radio&gt;<br>           &lt;/el-radio-group&gt;<br>         &lt;/el-form-item&gt;<br>         &lt;el-form-item label="栏目 : "&gt;<br>           &lt;el-checkbox-group v-model="ruleForm.checkList"&gt;<br>             &lt;el-checkbox label="0"&gt;旅游&lt;/el-checkbox&gt;<br>             &lt;el-checkbox label="1"&gt;音乐&lt;/el-checkbox&gt;<br>             &lt;el-checkbox label="2"&gt;美术&lt;/el-checkbox&gt;<br>           &lt;/el-checkbox-group&gt;<br>         &lt;/el-form-item&gt;<br>       &lt;/el-form&gt;<br>     &lt;/div&gt;<br>     &lt;div slot="footer" class="dialog-footer" style="text-align: right;"&gt;<br>       &lt;el-button @click="dialogFormEdit = false"&gt;取 消&lt;/el-button&gt;<br>       &lt;el-button type="primary" @click="dialogFormEdit = false"&gt;确 定&lt;/el-button&gt;<br>     &lt;/div&gt;<br>   &lt;/el-dialog&gt;<br>   &lt;!--确认提示 dialog--&gt;<br>   &lt;el-dialog title="提示" :visible.sync="dialogConfirmationPrompt" width="30%"&gt;<br>     &lt;span style="font-size: 14px;color: #333333"&gt;我是提示信息&lt;/span&gt;<br>     &lt;span slot="footer" class="dialog-footer"&gt;<br>      &lt;el-button @click="dialogConfirmationPrompt = false"&gt;取 消&lt;/el-button&gt;<br>      &lt;el-button type="primary" @click="dialogConfirmationPrompt = false"&gt;确 定&lt;/el-button&gt;<br>     &lt;/span&gt;<br>   &lt;/el-dialog&gt;</p></code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>export default {<br>  components: {<br>    BaseCard<br>  },<br>  data() {<br>    return {<br>      dialogContentDisplay: false,<br>      dialogFormEdit: false,<br>      dialogConfirmationPrompt: false,<br>      options2: [{<br>        value: '0',<br>        label: '开始'<br>      }, {<br>        value: '1',<br>        label: '未开始'<br>      }],<br>      ruleForm: {<br>        name: '',<br>        dateSelection: '',<br>        textarea: '',<br>        itemState: '',<br>        gender: 0,<br>        checkList: ['0']<br>      },<br>      rules: {<br>        dateSelection: [<br>          { required: true, message: '请选择日期', trigger: 'blur' }<br>        ],<br>        name: [<br>          { required: true, message: '请输入名称', trigger: 'blur' }<br>        ]<br>      }<br>    }<br>  },<br>  methods: {<br>    contentDisplay() {<br>      this.dialogContentDisplay = true<br>    },<br>    formEdit: function() {<br>      this.dialogFormEdit = true<br>    },<br>    confirmationPrompt() {<br>      this.dialogConfirmationPrompt = true<br>    }<br>  }<br>}</code></pre>
   </base-card>
 </div>
   <!--dialog end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  },
  data() {
    return {
      dialogContentDisplay: false,
      dialogFormEdit: false,
      dialogConfirmationPrompt: false,
      options2: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }],
      ruleForm: {
        name: '',
        dateSelection: '',
        textarea: '',
        itemState: '',
        gender: 0,
        checkList: ['0']
      },
      rules: {
        dateSelection: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    contentDisplay() {
      this.dialogContentDisplay = true
    },
    formEdit: function() {
      this.dialogFormEdit = true
    },
    confirmationPrompt() {
      this.dialogConfirmationPrompt = true
    }
  }
}
</script>

